<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/inputnumber.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>购物车</title>
</head>

<body>
    <div class="app-container" id="app">
        <!-- 顶部banner -->
        <div class="banner-box">
            <img src="./img/fruit.jpg" alt="" />
        </div>
        <!-- 面包屑 -->
        <div class="breadcrumb">
            <span>🏠</span> /
            <span>购物车</span>
        </div>
        <!-- 购物车主体 -->
        <div v-if="fruitList.length" class="main">
            <div class="table">
                <!-- 头部 -->
                <div class="thead">
                    <div class="tr">
                        <div class="th">选中</div>
                        <div class="th th-pic">图片</div>
                        <div class="th">单价</div>
                        <div class="th num-th">个数</div>
                        <div class="th">小计</div>
                        <div class="th">操作</div>
                    </div>
                </div>
                <!-- 身体 -->
                <div class="tbody">
                    <div class="tr" :class="{active:item.isChecked}" v-for="(item,index) in fruitList" :key="item.id">
                        <div class="td">
                            <input type="checkbox" v-model="item.isChecked" />
                        </div>
                        <div class="td">
                            <img :src="item.icon" alt="" />
                        </div>
                        <div class="td">{{ item.price }}</div>
                        <div class="td">
                            <div class="my-input-number">
                                <button class="decrease" @click="decrease(item.id)">-</button>
                                <span class="my-input__inner">{{item.num}}</span>
                                <button class="increase" @click="item.num++">+</button>
                            </div>
                        </div>
                        <div class="td">{{ item.num * item.price }}</div>
                        <div class="td"><button @click="del(item.id)">删除</button></div>
                    </div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="bottom">
                <!-- 全选 -->
                <label class="check-all">
            <input type="checkbox" v-model="isSelectAll" />
            全选
          </label>
                <div class="right-box">
                    <!-- 所有商品总价 -->
                    <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price"
                >{{totalPrice}}</span
              ></span
            >
            <!-- 结算按钮 -->
            <button class="pay" @click="checkout">
              结算( {{ totalNum }} )
            </button>
          </div>
        </div>
      </div>
      <!-- 空车 -->
      <div v-else class="empty">🛒空空如也</div>
    </div>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          // 水果列表-数据
          fruitList: [
            {
              id: 1,
              icon: "./img/火龙果.png",
              isChecked: true,
              num: 2,
              price: 6,
            },
            {
              id: 2,
              icon: "./img/荔枝.png",
              isChecked: false,
              num: 7,
              price: 20,
            },
            {
              id: 3,
              icon: "./img/榴莲.png",
              isChecked: false,
              num: 3,
              price: 40,
            },
            {
              id: 4,
              icon: "./img/鸭梨.png",
              isChecked: true,
              num: 10,
              price: 3,
            },
            {
              id: 5,
              icon: "./img/樱桃.png",
              isChecked: false,
              num: 20,
              price: 34,
            },
          ],
        },
        computed: {
          totalNum() {
            return this.fruitList
              .filter((item) => item.isChecked)
              .reduce((sum, item) => sum + item.num, 0);
          },
          totalPrice() {
            return this.fruitList
              .filter((item) => item.isChecked)
              .reduce((sum, item) => sum + item.num * item.price, 0);
          },
          isSelectAll: {
            get() {
              return this.fruitList.every((item) => item.isChecked);
            },
            set(value) {
              this.fruitList.forEach((item) => (item.isChecked = value));
            },
          },
        },
        methods: {
          del(id) {
            this.fruitList = this.fruitList.filter((item) => item.id != id);
          },
          decrease(id) {
            const obj = this.fruitList.find((item) => item.id == id);
            const index = this.fruitList.findIndex((item) => item.id == id);
            if (obj.num > 1) {
              obj.num -= 1;
              this.fruitList[index] = obj;
            }
          },
          checkout() {
            const isPay = this.fruitList.some((item) => item.isChecked);
            if (isPay) {
              alert(
                `您共购买了${this.totalNum}件商品，总金额为${this.totalPrice}元`
              );
              this.fruitList = this.fruitList.filter(
                (item) => item.isChecked == false
              );
            } else {
              alert("暂无选中商品，请选择商品~~");
            }
          },
        },
      });
    </script>
  </body>
</html>